<template>
  <el-cascader
    v-if="show"
    v-model="area"
    expand-trigger="hover"
    filterable
    :props="props"
    clearable
    @change="change"
  />
</template>

<script>
import {
  provinceDeviceNum,
  cityDeviceNum
} from '@/api/iot/iotDeviceBelongApi'

export default {
  name: 'ProvinceCityCascade',
  props: {
    status: {
      type: String,
      default: null
    },
    productId: {
      type: Number,
      default: null
    },
    seriesId: {
      type: Number,
      default: null
    },
    provinceId: {
      type: Number,
      default: null
    },
    cityId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      show: true,
      props: {},
      area: []
    }
  },
  watch: {
    status: {
      handler(val) {
        this.refresh()
      }
    },
    productId: {
      handler(val) {
        this.refresh()
      }
    },
    seriesId: {
      handler(val) {
        this.refresh()
      }
    },
    deptId: {
      handler(val) {
        this.refresh()
      }
    },
    provinceId: {
      handler(val) {
        if (val) {
          this.area = [val]
        }
      }
    },
    cityId: {
      deep: true,
      handler(val) {
        if (val) {
          this.area = [this.provinceId, val]
        }
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    refresh() {
      this.show = false
      this.$nextTick(() => {
        this.show = true
      })
    },
    init() {
      const that = this
      this.props = {
        checkStrictly: true,
        lazy: true,
        lazyLoad(node, resolve) {
          const { level, value } = node
          if (level === 0) {
            const req = {
              status: that.status,
              productId: that.productId,
              seriesId: that.seriesId
            }
            provinceDeviceNum(req).then(res => {
              const { code, data } = res
              if (code === '200') {
                that.$emit('province-init', {
                  productList: data
                })
                const productList = []
                data.forEach(product => {
                  productList.push({
                    value: product.provinceId,
                    label: product.province,
                    leaf: false
                  })
                })
                const allProductItem = {}
                allProductItem.value = null
                allProductItem.label = that.$t('all')
                allProductItem.leaf = true
                productList.unshift(allProductItem)
                resolve(productList)
              } else {
                that.$emit('province-init', {
                  productList: []
                })
              }
            })
          } else if (level === 1) {
            const req = {
              provinceId: value,
              status: that.status,
              productId: that.productId,
              seriesId: that.seriesId
            }
            cityDeviceNum(req).then(res => {
              const { code, data } = res
              if (code === '200') {
                that.$emit('city-init', {
                  cityList: data
                })
                const seriesList = []
                data.forEach(series => {
                  seriesList.push({
                    value: series.cityId,
                    label: series.city,
                    leaf: true
                  })
                })
                resolve(seriesList)
              } else {
                that.$emit('city-init', {
                  cityList: []
                })
              }
            })
          }
          resolve([])
        }
      }
    },
    change(data) {
      this.$emit('change', {
        provinceId: data[0],
        cityId: data[1]
      })
    }
  }

}
</script>


